import './TableFieldConfig.scss'

import { FormTemplate, ValueTypeMapping } from '../../Utils/FormTemp'
import { useEventEmitter } from 'ahooks'

import { IsEnabledMapping } from '../../Config/config'
import { Button, Popconfirm } from 'antd'
import { DeleteOutlined } from '@ant-design/icons';

const FieldsMapping = [
    { title: '字段名称', dataIndex: 'dataIndex', valueType: 'Hidden' },
    { title: '映射名称', dataIndex: 'title', valueType: 'Input' },
    { title: '列表宽度', dataIndex: 'width', valueType: 'InputNumber' },
    { title: '提示信息', dataIndex: 'tooltip', valueType: 'Input' },
    { title: '是否必选', dataIndex: 'rules', valueType: 'Radio', valueEnum: IsEnabledMapping },
    { title: '隐藏列表', dataIndex: 'hideInTable', valueType: 'Radio', valueEnum: IsEnabledMapping },
    { title: '隐藏搜索', dataIndex: 'hideInSearch', valueType: 'Radio', valueEnum: IsEnabledMapping },
    { title: '隐藏添加', dataIndex: 'hideInAdded', valueType: 'Radio', valueEnum: IsEnabledMapping },
    { title: '隐藏修改', dataIndex: 'hideInModify', valueType: 'Radio', valueEnum: IsEnabledMapping },
    { title: '缩略显示', dataIndex: 'ellipsis', valueType: 'Radio', valueEnum: IsEnabledMapping },
    { title: '可否复制', dataIndex: 'copyable', valueType: 'Radio', valueEnum: IsEnabledMapping },
    { title: '字段类型', dataIndex: 'valueType', valueType: 'Select', valueEnum: ValueTypeMapping },

    // 映射类型 接口信息 格式化字段



    {
        title: '下拉映射',
        dataIndex: 'valueEnum',
        valueType: 'Input',
        judgeField: 'valueType',
        judgeValue: 'Select'
    },
    {
        title: '单选映射',
        dataIndex: 'valueEnum',
        valueType: 'Input',
        judgeValue: 'Radio',
        judgeField: 'valueType'
    },
]


const TableFieldConfig = ({ data, ModalEvent, Off }) => {
    const { field, init } = data
    const FormEvent = useEventEmitter()
    FormEvent.useSubscription(val => {
        const { type, data } = val
        if (type === 'Added') {
            ModalEvent.emit({ type: 'modifyField', data })
        }
    })
    ModalEvent.useSubscription(val => { if (val.type === 'TableFieldConfigOff') Off() })

    const onDelete = () => {
        ModalEvent.emit({ type: 'deleteField', data: field })
        Off()
    }

    return (
        <div className='TableFieldConfig'>
            <FormTemplate columns={FieldsMapping} ModalEvent={FormEvent} init={init} />
            <Popconfirm
                title="删除警告!"
                description="是否将字段从表格中删除?"
                onConfirm={onDelete}
                okText="删除"
                cancelText="取消"
            >
                <Button type='primary' shape="circle" size='large' danger icon={<DeleteOutlined />} />
            </Popconfirm>
        </div>
    );
};

export default TableFieldConfig;